<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合租体</title>
<link rel="stylesheet" type="text/css" href="/css/imgareaselect-default.css" />
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery.imgareaselect.pack.js"></script>
  <script type="text/javascript" src="/js/ajaxFileUpload.js"></script>
  <style type="text/css">
  	.content{margin-top: 50px;}
  	#source{float: left;margin-right: 50px;min-width:300px;width:300px;height:300px;min-height: 300px;border: 1px gray solid; text-align: center; background-color: #c0c0c0;}
  	  #selectbanner{}
	 .head_1{width: 180px; height: 180px; overflow: hidden; float: left;  margin-right: 20px; border: 1px gray solid; }
	 .head_2{overflow: hidden;width: 100px;height: 100px; margin-bottom:5px; border: 1px gray solid;}
	 .head_3{margin-top:5px;overflow: hidden;width: 50px;height:50px;border: 1px gray solid;}
	 .box h4{border-bottom:1px solid #cdcdcd;line-height:30px;border: 1px gray solid;}
  </style>
<script type="text/javascript">
function previewImg(img, selection,size,imgId) {
	if (!selection.width || !selection.height)
        return;
    var scaleX = size / selection.width;
    var scaleY = size / selection.height;
    $(imgId).css({
        width: Math.round(scaleX * 300) + 'px',
        height: Math.round(scaleY * 300) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}
function preview(img,selection){
	previewImg(img,selection,180,'.head_1 img');
	previewImg(img,selection,100,'.head_2 img');
	previewImg(img,selection,50,'.head_3 img');
}
function uploadImg(file){
	//判断上传图片类型
	if(!/^image\/(bmp|jpg|png|jpeg|gif)$/.test(file.files[0].type)){
		alert("请上传正确的图片格式:jpg,png,gif,jpeg,bmp");
		return ;
		}
	if(file.files[0].size>500000){
		alert("图片太大 size:"+file.files[0].size);
		return ;
		}
	//ajax 上传图片
	$.ajaxFileUpload(
             {
          url:'/upload/fileUpload.jspa?type=msg',            //需要链接到服务器地址
          secureuri:false,
          fileElementId:'upload',                        //文件选择框的id属性
          dataType: 'json',                                     //服务器返回的格式，可以是json
          success: function (data, status)            //相当于java中try语句块的用法
          {   
            	 $('#head_180x180').attr("src","http://www.hezuti.com"+data.url+"?n="+new Date().getTime());
            	 $('#head_100x100').attr("src","http://www.hezuti.com"+data.url+"?n="+new Date().getTime());
            	 $('#head_50x50').attr("src","http://www.hezuti.com"+data.url+"?n="+new Date().getTime());
            	$('#selectbanner').imgAreaSelect({minHeight:180,minWidth:180, aspectRatio: '1:1', onSelectChange: preview,onSelectEnd: function (img, selection) {
                    $('input[name="x1"]').val(selection.x1);
                    $('input[name="y1"]').val(selection.y1);
                    $('input[name="x2"]').val(selection.x2);
                    $('input[name="y2"]').val(selection.y2);     
                    $('input[type="submit"]').removeAttr("disabled");       
                }
            });
             	$("#selectbanner").attr("src","http://www.hezuti.com"+data.url+"?n="+new Date().getTime());
             	if(data.h>data.w){
             		$("#selectbanner").css({height:"300px",width:(data.w*1.0/data.h)*300+"px"});
             		$('#h').val(300+"");
             		$('#w').val(Math.rand((data.w*1.0/data.h)*300)+"");
                 }else{
                 		$("#selectbanner").css({width:"300px",height:(data.h*1.0/data.w)*300+"px"});
                 		$('#w').val(300+"");
                 		$('#h').val(Math.rand((data.h*1.0/data.w)*300)+"");
                     }
          },
          error: function (data, status, e){            //相当于java中catch语句块的用法
          	
          }
      }
       );
}

</script>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="blueBar"></div>
<div class="globalContainer clearfix">
<%@include file="/include/header.jsp" %>
  <div class="mainContainer">
    <div class="rightCol">
    <div class="right_top">
       <span class="button "><a class="btn-b" href="/user/userinfo.jspa?t=info">个人信息</a></span>
       <span class="button on"><a class="btn-b" href="/user/userinfo.jspa?t=headpic">修改头像</a></span>
       <span class="button "><a class="btn-b" href="/user/userinfo.jspa?t=password">修改密码</a></span>
    </div>
      <!--右侧内容区域开始 -->
      <div class="rightBody">
      	<div class="content">
<form action="/upload/fileUpload.jspa" enctype="multipart/form-data" method="post">
<input type="file" id="upload" name="upload" onchange="uploadImg(this);">
<input type="hidden" name="type" value="head"  />
<input id="x1" type="hidden" name="x1" value="" />
  <input id="y1" type="hidden" name="y1" value="" />
  <input id="x2" type="hidden" name="x2" value="" />
  <input id="y2" type="hidden" name="y2" value="" />
  <input id="w" type="hidden" name="w" value="300"/>
  <input id="h" type="hidden" name="h" value="300"/>
  <input type="submit" value="确定" disabled="disabled">
  <br>
</form>
	<p style="color:#666666;line-height:18px;">仅支持jpg、gif、png图片文件，且文件小于5M。</p>
	</div>
<div id="source">
<img id="selectbanner" src="http://sta.ganjistatic1.com/src/att/vip/normal-headphoto.png" /></div>
<p >您上传的图像会生成三种尺寸，请注意图像中尺寸是否清晰</p>
<div class="head_1" >
	<img id="head_180x180"  src="http://localhost/data/userdata/49/head/head_180x180.jpg">	
</div>
<div class="head_2"><img id="head_100x100"  src="http://localhost/data/userdata/49/head/head_100x100.jpg"></div>
<div class="head_3"><img id="head_50x50"  src="http://localhost/data/userdata/49/head/head_50x50.jpg"></div>
      </div>
    </div>
  <%@include file="/include/left.jsp" %> 
  </div>
  <%@include file="/include/footer.jsp" %>
</div>
</body>
</html>
